<template>
	<view class="voiceprompt">
		<view class="header-top" :style="{height: top+'px'}">

		</view>
		<view class="header-line" :style="{height:height+'px'}">

			<view class="left" @click="shang">
				<u-icon name="arrow-left" size="17px" color="#ffffff" />
			</view>
			<view class="right" style="text-align: center;">
				<view class="search">
					语音提醒
				</view>
			</view>

		</view>
		<view class="box" :style="{height:'10'+'px'}">

		</view>
		<view class="voiceprompt_box">
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in hour" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minute" :key="index">{{item}}分</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in second" :key="index">{{item}}秒</view>
				</picker-view-column>
			</picker-view>
		</view>
		
	</view>
</template>

<script>
	import serviceorder from '@/pagesB/serviceorder/serviceorder.vue'
	export default {
		data() {
			const date = new Date()
			const hour = []
			const hours = date.getHours()
			const minute = []
			const minutes = date.getMinutes() + 1
			const second = []
			const seconds = date.getSeconds()
			for (let i = 0; i <= 24; i++) {
				hour.push(i)
			}
			for (let i = 1; i <= 60; i++) {
				minute.push(i)
			}
			for (let i = 1; i <= 60; i++) {
				second.push(i)
			}
			return {
				hour,
				hours,
				minute,
				minutes,
				second,
				seconds,
				value: [hour - 1, minute - 1, second - 1],
				visible: true,
				indicatorStyle: `color: #FFFFFF;`,
				right: '',
				padding: '',
				top: '',
				height: '',
				
			}

		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				console.log(val)
				// this.hour = this.hour[val[0]]
				// this.minute = this.minute[val[1]]
				// this.second = this.second[val[2]]
				// console.log(this.hours,this.minutes,this.seconds)
			}
			

		},
		onLoad(options) {
			// this.value[0] = options.hours;
			// this.value[1] = options.min;
			// this.value[2] = options.seconds;
			let meanInfo = uni.getMenuButtonBoundingClientRect()
			let ScreenWidth = uni.getSystemInfoSync().screenWidth
			let rpxTopx = ScreenWidth / 750
			this.right = 30 * rpxTopx + meanInfo.width
			this.padding = ScreenWidth - meanInfo.right
			this.top = meanInfo.top
			this.height = meanInfo.height

		}
	}
</script>
<style>
	.content-box {
		flex: 1;
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: red;
		border: 1px solid #f5f5f5;
	}

</style>

<style lang="scss" scoped>
	@import '@/static/sass/voiceprompt.scss'
</style>
